*{
    margin:0;
    padding:0;
    font-family: PingFangSC,Microsoft Yahei,Helvetica,Tahoma,Arial,Hiragino Sans GB,Hiragino Sans GB W3,STXihei,STHeiti,Heiti,SimSun,sans-serif!important;
    box-sizing: border-box;
    text-decoration: none;
}


.container{
    height: 100vh;
    width: 100%;
    background-color: #cfe46e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bigcard{
    height: 500px;
    width: 70%;
    border-radius: 30px;
    background-color: #fff;
    position:relative;
}

.bigcard .left{
    position:absolute;
    /* background-color: pink; */
    height: 90%;
    width: 55%;
    top:5%;
    left:5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.left h2{
    background: url(./web-logo.png);
    background-size: 30%;
    display: block;
    height: 100px;
    background-repeat: no-repeat;
}

.bigcard .right{
    position:absolute;
    /* background-color: aqua; */
    height: 90%;
    width: 35%;
    left: 60%;
    top:5%;
}


/* =======按钮样式======= */
.button button{
    border: 0px solid transparent;
    border-radius: 20px;
    height: 42px;
    width: 30%;
    margin-top: 20px;
}

.free{
    background-color: #9eb80c;
    color:#fff;
}

.free:hover{
    box-shadow: 0px 10px 10px 10px rgba(114, 236, 38, 0.2);
}

.pay{
    background-color: #eb5f35;
    color:#fff;
    margin-left: 20px;
}

.pay:hover{
    box-shadow: 0px 10px 10px 10px rgba(240, 90, 48, 0.2);
}

.logo{
    width: 75%;
}

.cloud{
    /* display: flex; */
    width: 90px;
    /* justify-content: end; */

}

#up_cl{
    float: right;
}


.person{
    width: 400px;
}

.link{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.link a{
    list-style: none;
    color:#777;
    float: left;
}

.link a:hover{
    text-decoration: underline;
    color:skyblue;
}